<template>
  <div style="width: 100%;"  :class="[noborder?'noborder':'', borderBottom ? 'bt':'',nobd?'noborder':'']">
    <tiny-input
      ref="ltextRef"
      :model-value="modelValue"
      :type="type"
      :size="size"
      :clearable="clearable"
      :placeholder="placeholder"
      :disabled="disabled"
      :digits="precision"
      :show-password="showPassword"
      :maxlength="maxlength"
      :minlength="minlength"
      :autofocus="autofocus"
      :readonly="readonly"
      :rows="rows"
      :input-style="inputStyle"
      :style="{width: width ? (typeof width === 'number' ? (width+'px') : width) :'100%'}"
      @clear="clear"
      @keydown="keydownEvent"
      @input="input"
      @change="change"
      @focus="toFocus"
      @blur="blur"
      v-bind="$attrs"
    >
    </tiny-input>
    <div class="input-ext" v-if="showDrop">
      <div class="item" v-for="(item, index) in list" :key="index" @mousedown="chose(item)">
        {{item.ext}}{{item.name}}
      </div>
    </div>
  </div>
</template>
<script>
// 文本输入框
import tool from '@/utils/tool'
import { Input } from '@opentiny/vue'
import {  IconMore } from '@opentiny/vue-icon'

export default {
  name: 'ltext',
  props: {
    modelValue: { type: [Number, String], default: '' },
    placeholder: { type: [Number, String], default: '' },
    invId: {type: [String, Number], default: ''},
    buId: {type: [String, Number], default: ''},
    transType: {type: [String, Number], default: ''},
    unit: {type: [String, Number], default: ''},
    cat: {type: String, default: ''}, // 取数据cat分类
    height: { type: [Number, String], default: '' },
    width: { type: [Number, String], default: '' },
    type: { type: [Number, String], default: 'text' },
    size: { type: [Number, String], default: 'small' },
    precision: { type: Number, default: 0 },
    maxlength: { type: Number, default: null },
    minlength: { type: Number, default: null },
    rows: { type: Number, default: null },
    clearable: { type: Boolean, default: false },
    autofocus: { type: Boolean, default: false },
    autoSelect: { type: Boolean, default: false },
    readonly: { type: Boolean, default: false },
    disabled: { type: Boolean, default: false },
    showMore: { type: Boolean, default: false },
    int: { type: Boolean, default: false },
    float: { type: Boolean, default: false },
    money: { type: Boolean, default: false },
    hasDrop: { type: Boolean, default: false },
    showPassword: { type: Boolean, default: false },
    noborder: { type: Boolean, default: false },
    borderBottom: { type: Boolean, default: false },
  },
  components: {
    TinyInput: Input
  },
  emits: ['update:modelValue', 'enter', 'left', 'down', 'up', 'right', 'clickMore','input'],
  data() {
    return {
      showDrop: false,
      nobd: false,
      more: IconMore(),
      list: []
    }
  },
  computed: {
    inputStyle () {
        return {
          height: this.height ? (typeof this.height === 'number' ? (this.height+'px'):this.height) :'',
          textAlign: (this.float || this.money || this.int) ? 'right' :'left',
        }
    }
  },
  methods: {
    input(value) {
      let val = value.target.value
      if (value) {
        if(this.int) {
          val = tool.xe.toNumber(value) === 0 ? '' : tool.xe.toNumber(value)
        }
      }
      this.$emit('input', val)
      this.update(val)
    },
    update (val) {
      this.$emit('update:modelValue', val)
    },
    blur () {
      if(this.hasDrop)
        this.showDrop = false
      if(this.modelValue) {
        if(this.int) {
          let v = tool.xe.toInteger(tool.xe.toNumber(this.modelValue))
          this.update(v?v:'')
        }
        else if(this.float) {
          this.update(this.precision? tool.xe.toFixed(tool.xe.toNumber(this.modelValue),this.precision):tool.xe.toNumber(this.modelValue))
        }
        else if( this.money) {
          let v = tool.xe.toNumber(this.modelValue)
          this.update( v? tool.xe.toFixed(tool.xe.toNumber(this.modelValue),2):'')
        }
      }
      this.$refs && this.$refs.ltextRef && this.$refs.ltextRef.blur()
    },
    toFocus () {
      if(this.hasDrop && this.cat) {
        tool.post('common/dropdown', {cat: this.cat, buId: this.buId, invId: this.invId, unit: this.unit,transType: this.transType}).then(ret => {
          if(ret.stat) {
            this.list = ret.data
            if(this.list.length > 0)
              this.showDrop = true
          }
        })
      }
      if(this.autoSelect) {
        this.$refs.ltextRef.select()
      }
      else {
        if(this.int || this.float|| this.money)
          this.$refs.ltextRef.select()
      }
    },
    chose (item) {
      this.update(item.name)
    },
    change (value) {
      if(this.int || this.float || this.money) {
        if(value) {
          let val = value
          if(this.precision) {
            if(this.float) {
              val = tool.xe.round(value, this.precision)
            }
            if(this.money) {
              val = tool.xe.toFixed(value, this.precision)
            }
          }
          else {
            val = tool.xe.toNumber(value)
          }
          this.update(val)
        }
      }
      else {
        this.update(tool.xe.trim(value))
      }
    },
    focus () {
      this.$refs.ltextRef.focus()
    },
    select () {

    },
    clear () {
      this.update('')
    },
    keydownEvent (e) {
      if(e.key) {
        let key = e.key ? e.key : e.$event.key
        let start = e.target.selectionStart // 光标位置
        switch (key) {
          case 'Enter': {
            this.$emit('enter')
          } break
          case 'ArrowLeft': {
            if(start === 0) {
              this.$emit('left')
            }
          }
            break
          case 'ArrowRight': {
            if(start === (this.modelValue?tool.xe.toString(this.modelValue).length:0)) {
              this.$emit('right')
            }
          }
            break
          case 'ArrowDown': {
            this.$emit('down')
          } break
          case 'ArrowUp': {
            this.$emit('up')
          } break
        }
      }
    },
    clickMore () {
      this.$emit('clickMore')
    }
  },
  watch: {
    disabled (newVal) {
      this.nobd = newVal
    }
  }
}
</script>
<style  lang="scss">
.tiny-input__inner {
  font-size: 14px;
}
.tiny-input.is-disabled .tiny-input__inner {
  font-size: 14px;
}
.noborder {
  .tiny-input__inner {
    border: none;
  }
  .tiny-input.is-disabled .tiny-input__inner {
    //border: none;
    //background: white;
  }
}
.bt {
  .tiny-input__inner {
    border-left: none;
    border-right: none;
    border-top: none;
  }
}
.showMore {
  cursor: pointer;
  &:hover {
    color: #3BAFDA;
  }
}
.input-ext {
  position: absolute;
  background-color: white;
  width: 100%;
  z-index: 9999;
  padding: 5px;
  border-left:var(--ti-input-border-color) ;
  border-right:var(--el-border) ;
  border-bottom:var(--el-border) ;
  .item {
    &:hover {
      cursor: pointer;
      background-color: #e2e2e2;
    }
  }
}
</style>